<template>
  <div class="m-step-vertical">
    <Steps direction="vertical" :active="3">
      <Step v-for="(step, index) in steps" :key="index" :title="step.title"/>
    </Steps>
  </div>
</template>

<script>
import { Step, Steps } from 'element-ui'

export default {
  name: 'MStepVertical',
  components: { Steps, Step },
  props: {
    steps: {
      type: Array,
      default() {
        return [
          { title: '' }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.m-step-vertical {
  /deep/.is-process {
    font-weight: normal;
    color: #E48B2C;
  }

  /deep/ .el-step__head {
    border: none;
  }

  /deep/ .el-step__icon .is-text {
    background-color: #C0C4CC;
  }

  /deep/.el-step__head.is-process /deep/.el-step__icon {
    background: #E48B2C;
  }
  /deep/.el-step__head.is-wait /deep/.el-step__icon {
    background: #C0C4CC;
  }

  /deep/.el-step__head.is-process /deep/.el-step__icon::after {
    background: rgba(228, 139, 44, 0.57);
  }

  /deep/.is-finish {
    color: #E48B2C;
  }

  /deep/.el-step__head.is-finish /deep/.el-step__icon {
    background: #E48B2C;
  }

  /deep/.el-step__head.is-finish /deep/.el-step__icon::after {
    background: rgba(228, 139, 44, 0.57);
  }
  /deep/.el-step__head.is-finish /deep/.el-step__line-inner {
    border-width: 1px !important;
    width: 100% !important;
    background: #FBD59F;
    border: none;
  }
  /deep/ .is-vertical {
    min-height: 80px !important;
  }
}
</style>
